<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除和复制元素内容</title>
</head>
<body>
    <div id="bcid1">不要学编程</div>
    <button id="btnid1">点击删除</button>
    <button id="btnid2">点击复制</button>
    <div id="bcid2"></div>
    <script>
        document.write('<p>删除元素中的内容：</p>')
        var bcid1 = document.getElementById('bcid1');
        var btnid1 = document.getElementById('btnid1');
        var bcid2 = document.getElementById('bcid2');
        var btnid2 = document.getElementById('btnid2');
        btnid1.onclick = function(){
            bcid1.innerText = "";
            console.log(bcid1)
        }
        btnid2.onclick = function(){
            bcid2.innerText = bcid1.innerText;  
            console.log(bcid2.innerText)
        }
    </script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #bcid1{
            width:300px;
            height:300px;
            background-color:aliceblue;
            border:1px solid rgb(136, 235, 177);
            margin:0 auto;
            align-content:center;
        }
        #bcid2{
            width:300px;
            height:300px;
            background-color:aliceblue;
            border:1px solid rgb(136, 235, 177);
            padding:10px auto;
            margin:20px auto;
            align-content:center;
        }
        #btnid1{
            width:100px;
            height:50px;
            background-color:skyblue;
            margin:20px auto;
            display:block;
        }
        #btnid2{
            width:100px;
            height:50px;
            background-color:skyblue;
            margin:20px auto;
            display:block;
        }
    </style>
</body>
</html>